React NativeアプリをAndroidデバイスでホットリロードする

モバイルアプリのクロスプラットフォームフレームワーク「React Native」では、簡単にAndroidデバイス（実機）でホットリロードを利用したデバッグが行えます。このブログでは、Androidデバイスでホットリロードを行うための手順を解説します。

#JavaScript

#iOS

#Android

#React

#React Native

諏訪悠紀

2018.09.03

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

React Nativeでサクサク開発！

React Native は、Facebook社が開発・公開しているネイティブアプリのクロスプラットフォーム開発フレームワークです。言語としてJavaScriptを使用し、React.jsを触ったことがある人であれば気軽にモバイルアプリ開発を始められます。

React Nativeは ホットリロード に対応しており、アプリを実機またはエミュレータ（シミュレータ）で実行した後は、ソースコードを保存するたびに自動でリロードが行われます。この機能を活用することにより、UIの構築などがサクサク行えます。

Introducing Hot Reloading · React Native

先日はiOSデバイスで試しましたが、クロスプラットフォームを体験するためにはやはりAndroidも。ということで今回はAndroidデバイスで試してみました。なお、下記の記事で環境構築およびサンプルプロジェクトの作成は済んでいる前提で進めています。

【お試し10分】React Nativeことはじめ！サンプルアプリをサクッと動かす

検証環境

以下の環境で試しました。

macOS High Sierra 10.13.2
Node.js 9.8.0
yarn 1.7.0
React 16.3.1
React Native 0.55.2
Xcode 9.0
Nexus 5
Android 6.0.1

また、環境として MacとAndroidデバイスは同じネットワークで接続していること が前提になります。なお、Macでアンチウイルスソフトなどを導入している場合はファイアーウォールによってポートが閉じられていることがありますので、うまく繋げない場合は一時的に無効化するなど、ファイアーウォールの設定を見直してください。

もっと上のOSバージョンで試したかったのですが、手元には6のデバイスしかありませんでした。

Androidデバイスでの環境の準備（Expoアプリのインストール）

実機でのデバッグにはExpoというツールを利用します。Expoについての解説は、また別の機会にしたいと思います。

Androidデバイスで、以下のリンクからExpoアプリをインストールします。

とりあえずデバッグするだけであればアカウント作成などは不要で、インストールしているだけで良いです。

サンプルアプリをAndroidデバイスで動かす

まずサンプルアプリを次のコマンドで動かします。

$ yarn start
yarn run v1.7.0
$ react-native-scripts start
22:51:28: Starting packager...
Packager started!

【QRコードが表示される】

Your app is now running at URL: exp://192.168.11.7:19000

View your app with live reloading:

  Android device:
    -> Point the Expo app to the QR code above.
       (You'll find the QR scanner on the Projects tab of the app.)
  iOS device:
    -> Press s to email/text the app URL to your phone.
  Emulator:
    -> Press a (Android) or i (iOS) to start an emulator.

Your phone will need to be on the same local network as this computer.
For links to install the Expo app, please visit https://expo.io.

Logs from serving your app will appear here. Press Ctrl+C at any time to stop.

 › Press a to open Android device or emulator, or i to open iOS emulator.
 › Press s to send the app URL to your phone number or email address
 › Press q to display QR code.
 › Press r to restart packager, or R to restart packager and clear cache.
 › Press d to toggle development mode. (current mode: development)

Expoがインストール済みの場合、Expoアプリに含まれているQRコードスキャナーで読み取ると、そのままアプリを起動できます。

または s を入力してメールアドレスを設定すれば、指定のメールアドレス宛てにアプリを開くためのリンクを送ることができます。

起動時にはJavaScriptの読み込みが少しかかります。

ソースコード App.js を編集して保存すると、自動でリロードが走ります。テキストを一行追加しました。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Androidでデバッグだ！</Text>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>
    );
  }
}

無事に更新されました！